<template>
  <div class="page">
    <div class="header-card">
      <div class="header-title">
        <div class="header-text elliptical-1" :title="textContent?.title">{{ textContent?.title }}</div>
      </div>
      <div class="card-content">
        <div class="header-span">
          <div v-for="(spItem, spIndex) in allLabel" :key="spIndex">
            <span :class="['default-span', spItem.labelType === 2 ? 'main-span' : 'default-text']"> {{ spItem.labelName }}</span>
          </div>
        </div>
        <div class="footer-text-box" :title="textContent?.content">
          {{ textContent?.content }}
        </div>
      </div>
    </div>
    <slot name="list"></slot>
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue'

  export interface DataSetCardProps {
    textContent?: any
  }
  let props = withDefaults(defineProps<DataSetCardProps>(), {
    textContent: {}
  })

  // 接收所有的label
  const allLabel = ref<any[]>([])
  const omitTitle = ref<any[]>([])
  watch(
    () => props,
    newValue => {
      if (newValue.textContent?.classification) {
        allLabel.value = props.textContent?.classification.concat(props.textContent?.labelList)
      }
      getNewArr()
    },
    {
      deep: true
    }
  )

  const getNewArr = () => {
    let length = allLabel.value.length
    let arr = []
    for (let i = 5; i < length; i++) {
      arr.push(allLabel.value[i])
    }
    omitTitle.value = arr
  }
</script>
<style lang="less" scoped>
  .header-card {
    padding: 20px 0;
    width: 100%;
    background: #fff;
    border: 1px solid @border1;
    border-radius: 10px;

    .header-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 8px;
      height: 36px;

      .header-text {
        color: @text01;
        .font16b();
      }
    }

    .card-content {
      overflow-y: auto;
      padding: 0 20px 20px;
    }
  }

  .header-span {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 6px;
    align-self: stretch;
    flex-wrap: wrap;

    .main-span {
      color: #c76300;
      background: var(--color-palett-orange-orange-02, #fcdfb0);
      border: 1px solid var(--mask-1, rgba(0, 0, 0, 0.05));
    }

    .default-text {
      color: #8599bf;
      border: 1px solid var(--mask-1, rgba(0, 0, 0, 0.05));
    }

    .default-span {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 2px 6px;
      border-radius: 6px;
      gap: 6px;
      .font12();
    }
  }

  .tooltip-label-text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 6px;
    color: #8599bf;
    border: 1px solid var(--mask-1, rgba(0, 0, 0, 0.05));
    border-radius: 6px;
    gap: 6px;
    .font12();
  }

  .bottom-tooltip {
    display: flex;
    align-items: flex-start;
    max-width: 688px;
    flex-wrap: wrap;
    gap: 6px;
  }

  .footer-text-box {
    margin-top: 12px;
    max-width: 288px;
    // max-height: 44px;
    color: @text03;
    word-break: break-all;
    .font14();
  }

  .page {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
</style>
